div {
  /* 盒子模型改为边框盒子 */
  box-sizing: border-box;
  font-size: 26px;
  color: red;
  font-weight: 700;
  text-align: center;
  font-style: italic;
}

.main {
  /* border: 1px solid red; */
  /* 设置页面宽高为视口宽高 */
  width: 100vw;
  /* width: 1800px; */
  height: 100vh;
  /* height: 1200px; */
}

.header {
  /* border: 1px solid red; */
  background-color: #F6ACA3;
  width: 100%;
  height: 10%;
  color: white;
  /* 字体大小 */
  /* font-size: 60px; */
  /* 字体大小响应式 */
  /* 这里的百分比 是父元素字体大小的50% */
  /* font-size: 50%; */
  /* 可以使用vh处理 */
  font-size: 5vh;
  /* 弹性适配 文字最小12px 适中5vh 最大48px */
  /* font-size: clamp(12px,5vh,48px); */
  /* js处理 */
}

.content {
  /* border: 1px solid red; */
  width: 100%;
  height: 85%;
}

.contentLeft,
.contentRight {
  /* border: 1px solid black; */
  /* display: inline-block; */
  height: 100%;
}

.contentLeft {
  background-color: rgba(217, 255, 47, 0.204);
  width: 30%;
  /* 浮动布局 - 左浮动 */
  float: left;
}

.contentRight {
  /* 浮动布局 - 右浮动 */
  float: right;
  width: 70%;
}

.up,
.down {
  /* border: 1px solid hotpink; */
  height: 50%;
}

#down{
  color: greenyellow;
}

.up {
  background-color: rgba(135, 207, 235, 0.429);
}

.down {
  background-color: #FFDCAF;
}

.footer {
  /* border: 1px solid red; */
  background-color: #9FD1CE;
  width: 100%;
  height: 5%;
  color: #999;
  font-weight: 400;
  font-size: 2vh;

}

.text {
  /* 垂直居中 */
  /* line-height: 10%; */
  /* vertical-align: middle; */
  /* 可以使用padding调节 */
  /* padding-top: 20px; */
  /* 可以使用布局调节 flex布局 */
  display: flex;
  /* flex布局 元素垂直居中 */
  align-items: center;
  /* flex布局 元素水平居中 */
  justify-content: center;
}